import { TeamOutlined, CaretUpOutlined, AlignLeftOutlined } from '@ant-design/icons';
import TitleCard from '@/pages/components/TitleCard';

const TotalCard = () => {
  const list = [
    { label: '商城商品总数', value: '6527', color: 'text-primary-color' },
    { label: '今日上架商品数', value: '33', color: 'text-primary-color' },
    { label: '今日下架商品数', value: '0', color: 'text-danger-color' },
    { label: '待收货数量', value: '108', color: 'text-primary-color' },
    { label: '待发货数量', value: '72', color: 'text-danger-color' },
  ];
  return (
    <div className="w-300 min-w-[300px]">
      {/*  */}
      <div className="bg-primary-color text-white w-180 px-16 py-8 rounded-4">
        <span className="text-12">累计会员数量(人)</span>
        <div className="mt-4">
          <TeamOutlined className="text-16" />
          <span className="mx-8 text-18 font-bold">267868</span>
          <span className="text-success-color">
            <CaretUpOutlined />
            16
          </span>
        </div>
      </div>
      {/*  */}
      <div className="mt-24">
        <TitleCard title="App端商城" />
        <div className="flex flex-wrap">
          {list.map((item, index) => {
            return (
              <div className="w-1/2 mt-12" key={index}>
                <div>
                  <span className={`${item.color} text-18 font-bold`}>{item.value}</span>
                  <AlignLeftOutlined rotate={90} className={`${item.color} text-16 ml-16`} />
                </div>
                <div className="text-color-subtitle">{item.label}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
export default TotalCard;
